<page-header [action]="phActionTpl">
  <ng-template #phActionTpl>
    <!--        <button (click)="add()" nz-button nzType="primary">新建</button>-->
  </ng-template>
</page-header>
<nz-card>
  <form nz-form (ngSubmit)="search()" class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shopId">店铺</nz-form-label>
          <nz-form-control *ngIf="isAdmin || isShow">
            <nz-select
              nzShowSearch
              [(ngModel)]="q.companyId"
              [nzPlaceHolder]="'请选择'"
              name="shopId"
              nzId="shopId"
              (ngModelChange)="companyChange($event)"
            >
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option
                *ngFor="let i of companyList; let n = index"
                [nzLabel]="i['company_name']"
                [nzValue]="i['ID']"
                [nzCustomContent]="true"
                ><div style="{{ i['ID'] == company_id ? 'color:#666DD9' : '' }}">{{ i['company_name'] }}</div></nz-option
              >
            </nz-select>
          </nz-form-control>
          <nz-form-control>
            <nz-select
              nzShowSearch
              [(ngModel)]="q.shopId"
              [nzPlaceHolder]="'请选择'"
              name="shopId"
              nzId="shopId"
              (ngModelChange)="shopChange($event)"
            >
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option *ngFor="let i of shops" [nzLabel]="i['fordeal_shop_name']" [nzValue]="i['shop_id']"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="orderSn">订单编号</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="q.orderSn" name="orderSn" placeholder="请输入" id="orderSn" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-select nz-col nzMd="8" nzSm="24" [(ngModel)]="q.skuType" name="skuType" nzId="skuType" [nzPlaceHolder]="'请选择'">
              <nz-option *ngFor="let i of sku_type" [nzLabel]="i.text" [nzValue]="i.index"></nz-option>
            </nz-select>
            <input
              nz-input
              nz-col
              nzMd="16"
              nzSm="24"
              [(ngModel)]="q.skuTypeValue"
              id="skuTypeVal"
              name="skuTypeVal"
              placeholder="请输入"
            />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="overTime">履约时效</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.overTime" name="overTime" nzId="overTime" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option nzLabel="3天" [nzValue]="3"></nz-option>
              <nz-option nzLabel="5天" [nzValue]="5"></nz-option>
              <nz-option nzLabel="7天" [nzValue]="7"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="deliverPlaceCode">发货地区</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.deliverPlaceCode" name="deliverPlaceCode" nzId="deliverPlaceCode" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="全部" nzValue=""></nz-option>
              <nz-option *ngFor="let i of place" [nzLabel]="i['deliverPlaceDesc']" [nzValue]="i['deliverPlaceCode']"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="placedOrderAt">下单时间</nz-form-label>
          <nz-form-control>
            <nz-range-picker
              nzMode="date"
              [ngModelOptions]="{ standalone: true }"
              [nzRanges]="ranges"
              [(ngModel)]="placedOrderAt"
              (ngModelChange)="placedOrderAtChange($event)"
            ></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="readiedAt">库存匹配时间</nz-form-label>
          <nz-form-control>
            <nz-range-picker
              nzMode="date"
              [ngModelOptions]="{ standalone: true }"
              [nzRanges]="ranges"
              [(ngModel)]="readiedAt"
              (ngModelChange)="readiedAtChange($event)"
            ></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="overTimeMark">是否超时履约</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.overTimeMark" [nzPlaceHolder]="'请选择'" name="overTimeMark" nzId="overTimeMark">
              <nz-option nzLabel="全部" [nzValue]="-1"></nz-option>
              <nz-option nzLabel="是" [nzValue]="1"></nz-option>
              <nz-option nzLabel="否" [nzValue]="0"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="cancelMark">是否缺货取消</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.cancelMark" [nzPlaceHolder]="'请选择'" name="cancelMark" nzId="cancelMark">
              <nz-option nzLabel="全部" [nzValue]="-1"></nz-option>
              <nz-option nzLabel="是" [nzValue]="1"></nz-option>
              <nz-option nzLabel="否" [nzValue]="0"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="deliverPlaceCode">倒计时<=</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.countDown" name="countDown" nzId="countDown" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="不限" [nzValue]="0"></nz-option>
              <nz-option *ngFor="let cd of countDownOptions" [nzLabel]="cd.label" [nzValue]="cd.val"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="orderSn">产品标题</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="q.title" name="title" placeholder="请输入" id="title" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="6">
        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
        <a nz-button (click)="export()" class="mx-sm">导出</a>
      </div>
    </div>
  </form>
  <nz-tabset>
    <nz-tab nzTitle="全部（{{ statusCount['all'] }}）" (nzSelect)="tabSelect(0)"></nz-tab>
    <nz-tab nzTitle="未发货（{{ statusCount['un_shipped'] }}）" (nzSelect)="tabSelect(8)">
      <nz-tabset>
        <nz-tab nzTitle="待补货（{{ statusCount['be_replenish'] }}）" (nzSelect)="tabSelect(8)"></nz-tab>
        <nz-tab nzTitle="补货中（{{ statusCount['replenishing'] }}）" (nzSelect)="tabSelect(9)"></nz-tab>
        <nz-tab nzTitle="处理中（{{ statusCount['handler'] }}）" (nzSelect)="tabSelect(10)"></nz-tab>
      </nz-tabset>
    </nz-tab>
    <nz-tab nzTitle="已发货（{{ statusCount['shipped'] }}）" (nzSelect)="tabSelect(3)"></nz-tab>
    <nz-tab nzTitle="交易成功（{{ statusCount['success'] }}）" (nzSelect)="tabSelect(5)"></nz-tab>
    <nz-tab nzTitle="交易关闭（{{ statusCount['closed'] }}）" (nzSelect)="tabSelect(7)">
      <nz-tabset>
        <nz-tab nzTitle="已拒签（{{ statusCount['reject'] }}）" (nzSelect)="tabSelect(7)"></nz-tab>
        <nz-tab nzTitle="已取消（{{ statusCount['canceled'] }}）" (nzSelect)="tabSelect(99)"></nz-tab>
      </nz-tabset>
    </nz-tab>
  </nz-tabset>
  <nz-table
    #orderTable
    [nzData]="listOfData"
    nzSize="default"
    [nzPageSizeOptions]="[30, 50, 100]"
    [nzLoading]="loading"
    [nzTotal]="total"
    [nzPageSize]="ps"
    [nzPageIndex]="pi"
    [nzFrontPagination]="false"
    [nzShowQuickJumper]="true"
    [nzShowSizeChanger]="true"
    (nzPageIndexChange)="pageIndexChange($event)"
    (nzPageSizeChange)="pageSizeChange($event)"
    [nzShowTotal]="totalTemplate"
  >
    <thead>
      <tr>
        <th nzAlign="center">商品</th>
        <th nzAlign="center">单价</th>
        <th nzAlign="center">数量</th>
        <th nzAlign="center">订单金额</th>
        <th nzAlign="center">发货地区｜买家国家</th>
        <th nzAlign="center">状态｜倒计时</th>
        <th nzAlign="center">所属店铺</th>
        <th nzAlign="center">商品创建时间</th>
        <th nzAlign="center">处理进度</th>
        <th nzAlign="center">查看</th>
        <th nzAlign="center">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of orderTable.data">
        <tr>
          <td colspan="9">
            <span>订单编号：{{ data['orderSn'] }}</span>
            <nz-divider nzType="vertical"></nz-divider>
            <span>下单时间：{{ data['placedOrderAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</span>
            <nz-divider nzType="vertical"></nz-divider>
            <span>支付时间：{{ data['paymentAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</span>
            <nz-divider nzType="vertical"></nz-divider>
            <ng-container *ngIf="data['status'] == 99">
              <span>取消时间：{{ data['canceledAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</span>
              <nz-divider nzType="vertical"></nz-divider>
            </ng-container>
            <ng-container *ngIf="data['status'] == 5">
              <span>签收时间：{{ data['closedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</span>
              <nz-divider nzType="vertical"></nz-divider>
            </ng-container>
            <ng-container *ngIf="data['status'] == 7">
              <span>关闭时间：{{ data['closedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</span>
              <nz-divider nzType="vertical"></nz-divider>
            </ng-container>
            <span>结算方式：出仓结算</span>
          </td>
        </tr>
        <tr>
          <td>
            <ng-container *ngFor="let sku of data['skus']">
              <nz-comment>
                <nz-comment-content>
                  <ng-container>
                    <nz-image
                      [nzWidth]="140"
                      [nzHeight]="140"
                      style="float: left; padding-right: 10px"
                      nzSrc="{{ sku['skuImageUrl'] }}"
                    ></nz-image>
                    <p>{{ sku['itemTitle'] }}</p>
                    <p>{{ sku['skuExtAttribute'] }}</p>
                    <p>Fordeal SKU: {{ sku['skuId'] }}</p>
                    <p>商家SKU: {{ sku['skuNo'] }}</p>
                    <p class="itemId">商品ID: {{ sku['itemId'] }}</p>
                    <p class="itemNo">商品货号: {{ sku['itemNo'] }}</p>
                    <p>
                      <nz-tag [nzColor]="'orange'">{{ sku['overTime'] }}天</nz-tag>
                    </p>
                  </ng-container>
                </nz-comment-content>
              </nz-comment>
            </ng-container>
          </td>
          <td class="text-center">
            <ng-container *ngFor="let sku of data['skus']; let i = index">
              <p>&nbsp;</p>
              <p *ngIf="sku['originPrice'] != sku['finalPrice']">
                <span class="text-grey" style="text-decoration: line-through">{{ data['cur'] }} {{ sku['originPrice'] }}</span>
              </p>
              <p>{{ data['cur'] }} {{ sku['finalPrice'] }}</p>
              <p>&nbsp;</p>
            </ng-container>
          </td>
          <td class="text-center">
            <ng-container *ngFor="let sku of data['skus']">
              <p>&nbsp;</p>
              <p *ngIf="sku['buyerCancelQuantity'] > 0">
                <span class="text-grey" style="text-decoration: line-through">{{ sku['buyerCancelQuantity'] }}</span>
              </p>
              <p>{{ sku['totalQuantity'] - sku['buyerCancelQuantity'] }}</p>
              <p>&nbsp;</p>
            </ng-container>
          </td>
          <td class="text-center">
            <p>{{ data['cur'] }} {{ data['finalPrice'] }}</p>
            <p>{{ data['paymentType'] }}</p>
          </td>
          <td class="text-center"
            >{{ placesMap[data['deliverPlace']] ? placesMap[data['deliverPlace']] : '-' }} | {{ data['saleCountry'] }}</td
          >
          <td class="text-center">
            <p>
              <nz-tag [nzColor]="statusNotice[data['status']]['color']">{{ statusNotice[data['status']]['text'] }}</nz-tag>
            </p>
            <p>{{ statusNotice[data['status']]['notice'] }}</p>
            <nz-countdown
              *ngIf="data['status'] == 8 || data['status'] == 9 || data['status'] == 10"
              [nzValue]="data['deadline']"
              [nzFormat]="'D 天 H 时 m 分 s 秒'"
              [nzValueStyle]="{ 'font-size': '12px', color: '#faad14' }"
            ></nz-countdown>
          </td>
          <td class="text-center"
            ><span style="{{ shopMap[data['shop_id']] ? '' : 'color:#cccccc' }}"
              >{{ shopMapFull[data['shop_id']] }}<br />{{ companyMapFull[data['shop_id']] }}</span
            ></td
          >
          <td class="text-center">{{ getTime(data['preCreatedAtString']) }}</td>
          <td class="text-center">
            <div id="orderUpdateStateBox">
              <div class="orderUpdateStateInfo" style="margin-bottom: 10px" *ngIf="data['orderProcess']; else elseTemplate">
                <span
                  title="最后更新：{{ data['orderProcess']['lastUpdateUser'] }} {{ correctDatetime(data['orderProcess']['lastUpdateAt']) }}"
                  >{{ data['orderProcess']['lastProcessDate'] }}：{{ data['orderProcess']['lastProcessContent'] }}</span
                >
                <span style="color: red" *ngIf="data['orderProcess']['updateAtOverTime']"
                  ><br />{{ data['orderProcess']['updateAtOverTime'] }}</span
                >
              </div>
              <ng-template #elseTemplate>
                <div class="orderUpdateStateInfo" style="margin-bottom: 10px">
                  <span style="color: red">未跟踪</span>
                </div>
              </ng-template>
              <a nz-button (click)="order_process(data['shop_id'], data['orderSn'], data['orderId'])" class="set_purchase">编辑进度</a>
            </div>
          </td>
          <td class="text-center">
            <a nz-button (click)="view(data['shop_id'], data['orderSn'])">查看详情</a>
          </td>
          <td class="text-center">
            <ng-container *ngFor="let sku of data['skus']">
              <nz-comment>
                <nz-comment-content>
                  <ng-container>
                    <a
                      nz-button
                      (click)="set_purchase(data['shop_id'], data['orderSn'], data['orderId'], sku['itemId'], sku['skuId'])"
                      class="set_purchase"
                      >设置采购</a
                    >
                    <a
                      nz-button
                      (click)="on_purchase(data['shop_id'], data['orderSn'], data['orderId'], sku['itemId'], sku['skuId'])"
                      class="on_purchase"
                      >一键采购</a
                    >
                  </ng-container>
                </nz-comment-content>
              </nz-comment>
            </ng-container>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
  <ng-template #totalTemplate let-total> 共 {{ total }} 条 </ng-template>
</nz-card>
